<template>
	<div>
		<img :src="src" alt="" srcset="" />
		<button @click="zuo">向左</button>
		<button @click="you">向右</button>
	</div>
</template>

<script setup>
	import { ref } from 'vue'
	let pic_arr = ['http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&quality=89', 'http://p1.music.126.net/c27byhx3KVvCle1zykmH_A==/109951165421216056.jpg?imageView&quality=89', 'http://p1.music.126.net/uU3uL1XvXk7UieISRivS2g==/109951165421640213.jpg?imageView&quality=89', 'http://p1.music.126.net/Mot-Vbz3JxqI2zbLzye0lQ==/109951165421632886.jpg?imageView&quality=89', 'http://p1.music.126.net/KLyKvFgCMO68juLWVCgD4A==/109951165421399234.jpg?imageView&quality=89']
	let src = ref('http://p1.music.126.net/A4oyg7nydQk9na3fCE7ZDg==/109951165421617285.jpg?imageView&quality=89')
	let i = 0
	let you = function () {
		i++
		// i ==5
		if (i>=pic_arr.length) {
			i = 0
		}
		src.value = pic_arr[i]
	}
	// 5 0-4 
	let zuo = function () {
		i--
		// i 可以是0
		if (i<=-1) {
			i = pic_arr.length-1
		}
		src.value = pic_arr[i]
	}
</script>

<style scoped>
	img {
		width: 500px;
		height: 300px;
	}
</style>
